<template>
    <el-table :data="props.item.paramDataModel" class="normalTable" :border="true" style="width: 100%;">
        <el-table-column prop="meshName" label="部件名称" width="200" class="meshName">
            <template #default="scope">

                <ul>
                    <li v-if="scope.row.checkAllMesh">
                        All Except Selected
                    </li>
                    <template v-if="!scope.row.checkAllMesh">
                        <li :key="id" v-for="(i, id) in scope.row.meshName">{{ i }}</li>
                    </template>

                </ul>
                <div v-if="scope.row.meshName.length == 0 && !scope.row.checkAllMesh" class="tc"><span class="f12 c9"
                        style="color: #999;">暂无数据</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="coordinate" label="坐标" width="300">
            <template #default="scope">

                <ul>
                    <li v-if="scope.row.checkAllMesh">
                        All Except Selected
                    </li>
                    <template v-if="!scope.row.checkAllMesh">
                        <li v-for="(i, id) in scope.row.coordinate">{{ i }}</li>
                    </template>
                </ul>
                <div v-if="scope.row.coordinate.length == 0 && !scope.row.checkAllMesh" class="tc"><span class="f12 c9"
                        style="color: #999;">暂无数据</span></div>
            </template>
        </el-table-column>
        <el-table-column prop="params" label="参数">
            <template #default="scope">
                <div class="fx fw paramsDiv">
                    <template :key="prIndex" v-for="(prItem, prIndex) in scope.row.params">
                        <el-form :model="prItem" ref="prItemRef" label-width="100px" class="demo-dynamic">
                            <!--  <div class="info" >ggg</div> -->
                            <!-- <div class="info" v-if="prItem.description">{{prItem.description}}</div> -->
                            <div v-if="prItem.type == 0">
                                <!-- 下拉选择的参数开始 -->
                                <template v-if='prItem.key == "dof" || prItem.key == "type" || prItem.key == "gravity"'>
                                    <el-form-item :label="prItem.name" :rules="getRules(prItem)"
                                        :label-width="prItem.labelWidth" prop="val" class="bb mb20 w329 ">
                                        <div class="info">{{ prItem.description }}</div>
                                        <el-select @change="handleSelectChange" @click="handleClickEvent(scope.row)"
                                            v-model="prItem.val" style="max-width: 209px;" class="m-2" placeholder="请选择"
                                            size="large">
                                            <template v-for="(dItem, dIndex) in getOptions(prItem.key)" :key="dIndex">
                                                <el-option :label="dItem" :value="dItem" />
                                            </template>
                                        </el-select>
                                    </el-form-item>
                                </template>
                                <!-- 下拉选择的参数结束 -->
                                <template v-else>
                                    <el-form-item prop="val" :label="prItem.name" :rules="getRules(prItem)"
                                        :label-width="prItem.labelWidth" class="bb mb20 w329 ">
                                        <div class="info">{{ prItem.description }}</div>
                                        <el-input v-input="{ field: prItem }" :disabled="prItem.disabled"
                                            :maxlength="getMaxLength(prItem)" v-model="prItem.val" type="text"
                                            @input="handleInputChange(prItem)" autocomplete="off" />
                                    </el-form-item>
                                </template>

                            </div>
                            <div v-else-if="prItem.type == 1" class="r">
                                <ListFrame ref="listFrame" :prItem="prItem"></ListFrame>
                            </div>
                            <div v-else="prItem.type==2" class="r">
                                <MapFrame ref="mapFrame" :prItem="prItem"></MapFrame>
                            </div>
                        </el-form>
                    </template>
                </div>
            </template>
        </el-table-column>
        <el-table-column v-if="item.type == 0" label="操作" width="200" fixed="right">
            <template #default="scope">
                <el-button type="primary" @click="addModelPoint(scope.$index)">选择对象</el-button>
                <el-button type="danger" @click="handleDeleteParams(scope.$index, scope.row, item.appParams)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<style>
.dropdowntb {
    z-index: 100000;
}

.info {
    font-size: 12px;
    color: #999;
    line-height: 1;
    position: absolute;
    top: -17px;
    left: 0;
    white-space: nowrap;
    /*  margin-top: -15px;
    padding-bottom: 5px; */
}

.normalTable .el-form {
    margin-top: 10px;
}
</style>
<script setup>
import { ref, defineExpose } from 'vue'
import plusBtn from '@/components/plusBtn/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import ListFrame from './ListFrame.vue'
import MapFrame from './MapFrame.vue'

const props = defineProps({
    item: {
        type: Object,
        default: {},
    }
})
const currentItem = ref()//当前被点击的行
//记录被点击的行数据
function handleClickEvent(item) {
    currentItem.value = item
}

//实体类型选择fluid时，把其它表单禁用
function handleSelectChange(val) {
    if (val == 'fluid') {
        currentItem.value.params.map((prItem) => {
            prItem.disabled = true
        })
    } else {
        currentItem.value.params.map((prItem) => {
            prItem.disabled = false
        })
    }
}

// 把科学计数法转为数字
function getFullNum(num) {
    //处理非数字
    if (isNaN(num)) { return num };
    //处理不需要转换的数字
    var str = '' + num;
    if (!/e/i.test(str)) { return num; };
    //先获取到精确的小数位
    var fixed = ('' + num).match(/\d+$/)[0];
    //拿到保留指定的小数
    return new Number(num).toFixed(fixed);
}

//校验数字范围
function numValidator(rule, value, callback) {
    if (value.toLowerCase().search('e') != -1) {
        value = getFullNum(value)
    }
    if (value > rule.dataMaxLength) {
        callback(new Error('请输入小于' + rule.dataMaxLength + '的数字'))
    } else {
        callback()
    }
}

//获取当前表单最多可输入字数
function getMaxLength(item) {
    if (item.dataType == 0) {
        return 32
    } else {
        return item.dataMaxLength
    }
}

//校验数字范围,必须大于0
function numValidatorNoZero(rule, value, callback) {
    if (value === '' || value === undefined) {
        callback(new Error(rule.name + '不能为空'))
    }
    if (value.toLowerCase().search('e') != -1) {
        value = getFullNum(value)
    }
    if (value == 0) {
        callback(new Error(rule.name + '的值不能为0'))
    } else if (value > rule.dataMaxLength) {
        callback(new Error(rule.name + '的值不能大于' + rule.dataMaxLength))
    } else {
        callback()
    }
}

//校验数字范围
function numValidatorFun(rule, value, callback) {
    if (value === '' || value === undefined) {
        callback(new Error(rule.name + '不能为空'))
    }
    if (value.toLowerCase().search('e') != -1) {
        value = getFullNum(value)
    }
    if (value > rule.dataMaxLength) {
        callback(new Error(rule.name + '的值不能大于' + rule.dataMaxLength))
    } else {
        callback()
    }

}

//字符串检验
function strValidatorFun(rule, value, callback) {
    if (value === '' || value === undefined) {
        callback(new Error(rule.name + '不能为空'))
    }
}

//获取当前表单的验证规则
function getRules(item) {
    let validatorFun = null;
    if (item.dataType == 0) {
        if (item.zero == 1) {
            validatorFun = numValidatorNoZero
        } else {
            validatorFun = numValidatorFun
        }
    } else {
        validatorFun = strValidatorFun
    }
    return [{ required: true, validator: validatorFun, trigger: 'blur', name: item.name, dataMaxLength: item.dataMaxLength }]
}

/**
 * 根据参数的key获取下拉框选项
 * @param key 参数的key
 *  */
function getOptions(key) {
    let options = []
    if (key == 'dof') {
        options = [
            'U1',
            'U2',
            'U3',
            'UR1',
            'UR2',
            'UR3']
    } else if (key == 'type') {
        options = [
            'solid',
            'fluid'
        ]
    } else if (key == 'gravity') {
        options = ['x', '-x', ' y', '-y', 'z', '-z']
    }
    return options
}

const emits = defineEmits(['modifyParentData']);

//监听表单数据变化
function handleInputChange(pItem) {
    if (props.item.groupKey == 'JOB' && pItem.key == 'name') {
        emits('modifyParentData', { taskName: pItem.val })
    }
}
//添加模型的选点
function addModelPoint(index) {
    //2、触发父组件中暴露的childFn方法并携带数据  
    emits('modifyParentData', { dialogFormVisible: true, crtLine: index })
}

//删除行数
function handleDeleteParams(index, row, params) {
    ElMessageBox.confirm(
        '你是否确定删除本条数据',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            props.item.paramDataModel.splice(index, 1)
        })
        .catch(() => {

        })

}
//返回给父组件的验证状态
let valid = true
//表单获取
const prItemRef = ref(null)
//表单验证回调
function validator(isValid, invalidFields) {
    // 认证不通过
    if (!isValid) {
        valid = false
    }
}

const listFrame = ref(null)//数组参数索引
const mapFrame = ref(null)//集合参数索引
//表单认证
function checkForm() {
    //获取子组件的验证状态
    if (listFrame.value && Array.isArray(listFrame.value) && listFrame.value.length > 0) {
        listFrame.value.map((item, index) => {
            item.checkForm()
        })
    }
    if (mapFrame.value && Array.isArray(mapFrame.value) && mapFrame.value.length > 0) {
        mapFrame.value.map((item, index) => {
            item.checkForm()
        })
    }
    if (Array.isArray(prItemRef.value)) {
        prItemRef.value.map((item, index) => {
            item.validate(validator)
        })
    } else if (prItemRef.value) {
        prItemRef.value.validate(validator)
    }
    return valid
}
defineExpose({ checkForm })



</script>